<template>
  <div>
    <el-dialog
        title="修改个人信息"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose">
      <el-form :model="form" :rules="rules" ref="form" label-width="150px">
        <div class="updateinfo">
          <div class="left">
            <el-form-item label="头像" prop="header">
<!--              <img style="width:150px;height:110px" :src="form.header">-->
              <el-upload
                  :action="uploadImgUrl"
                  list-type="picture-card"
                  :on-success="handleUploadSuccess"
                  :before-upload="handleBeforeUpload"
                  :on-error="handleUploadError"
                  name="multipartFile"
                  :show-file-list="false"
                  :headers="headers"
                  style="display: inline-block; vertical-align: top"
              >
                <img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar" width="100%" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>

<!--              <el-upload-->
<!--                  action="http://localhost:9000/api/upload/upload"-->
<!--                  list-type="picture-card"-->
<!--                  :file-list="fileList"-->
<!--                  name="multipartFile"-->
<!--                  :on-preview="handlePictureCardPreview"-->
<!--                  :on-remove="handleRemove"-->`
<!--                  :on-success="handleSuccess"-->
<!--                  :show-file-list="false"-->
<!--                  :headers="headers">-->
<!--                <i class="el-icon-plus"></i>-->
<!--              </el-upload>-->
<!--              <el-dialog :visible.sync="Visible">-->
<!--                <img width="100%" :src="dialogImageUrl" alt="">-->
<!--              </el-dialog>-->
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="form.nickname"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio v-model="form.sex" :label="1" >男</el-radio>
              <el-radio v-model="form.sex" :label="2" >女</el-radio>
            </el-form-item>

          </div>
          <div class="right">
<!--            <el-form-item label="用户编号" prop="id">-->
<!--              <el-input v-model="form.id" disabled></el-input>-->
<!--            </el-form-item>-->
            <el-form-item label="账号" prop="username">
              <el-input v-model="form.username"></el-input>
            </el-form-item>

            <el-form-item label="地区" prop="city">
              <el-input v-model="form.city"></el-input>
            </el-form-item>
            <el-form-item label="职业" prop="job">
              <el-input v-model="form.job"></el-input>
            </el-form-item>
            <el-form-item label="生日" prop="birth">
              <el-date-picker v-model="form.birth"></el-date-picker>
            </el-form-item>
            <el-form-item label="个性签名" prop="sign">
              <el-input v-model="form.sign"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="mobilePhoneNumber">
              <el-input v-model="form.mobile"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="submit">提 交</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>


import axios from "axios";
import {getToken} from "@/utils/setToken";

export default {
  name: "PersonalDia",
  props:{
    showLog:{
      type: Boolean,
      default : false
    }
  },
  watch:{
    showLog(val){
      this.dialogVisible = val;
      this.load()
    },
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      uploadImgUrl: "http://localhost:9000/api/upload/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      dialogVisible: false,
      dialogImageUrl: '',
      form: {
        gender:'',
        header: "",
        password: "",
        nickname: "",
        birth:'',
        email: "",
        mobile: "",
        sex: 1,
        id: Number,
        username: "",
        city: "",
        job: "",
        sign: "",
      },
      rules: {
        nickname: [
          { required: true, message: "昵称不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "账号密码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleUploadSuccess(res) {
      this.dialogImageUrl = res;

      this.loading.close();
    },
    handleBeforeUpload() {
      this.loading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handleUploadError() {
      this.$message({
        type: "error",
        message: "上传失败",
      });
      this.loading.close();
    },

    // clearUploadFile(){
    //   this.$refs["upload"].clearFiles();
    // },
    // handleSuccess(response,flie,fileList){
    //   console.log(response)
    //     this.form.header = response;
    // },
    // handleRemove(file, fileList) {
    //   console.log(file, fileList);
    // },
    // handlePictureCardPreview(file) {
    //   this.dialogImageUrl = file.url;
    //   this.Visible = true;
    // },
    //
    open() {
      this.dialogVisible = true;
    },
    load() {
      axios({
        url:'/member/queryMember',
        method:'get'
      }).then(response =>{
        if (response.code == 200){
          console.log(response)
          this.form.username=response.data.username
          this.form.nickname = response.data.nickname
          this.form.mobile=response.data.mobile
          this.form.email = response.data.email
          this.dialogImageUrl = response.data.header;
           this.form.sex = response.data.gender
          this.form.birth = response.data.birth
          this.form.job = response.data.job
          this.form.city = response.data.city
          this.form.sign=response.data.sign
          if (response.data.gender=='男'){
            this.form.sex=1
          }else {
            this.form.sex=2
          }
        }
      })
      // userInfo(this.$store.state.id)
      //     .then((res) => {
      //       console.log(res);
      //       Object.assign(this.form, res.data);
      //     })
      //     .catch((err) => {
      //       console.log(err);
      //     });
    },
    chooseGender(){
      if (this.form.sex==1){
        this.form.gender='男'
      }else {
        this.form.gender='女'
      }
    },
    submit() {
      this.chooseGender();
      axios({
        url:'/member/updateMember',
        method:'post',
        data:{
          username:this.form.username,
          nickname:this.form.nickname,
          city:this.form.city,
          gender:this.form.gender,
          header:this.dialogImageUrl,
          birth:this.form.birth,
          email: this.form.email,
          mobile: this.form.mobile,
          job: this.form.job,
          sign: this.form.sign,
        }
      }).then(response =>{
        if (response.code==200){
          alert(response.msg)
          this.dialogVisible = false;
          this.$emit("update:flesh",false);
          this.$emit('initList');
        }
      })
      // updateUser(this.form)
      //     .then((res) => {
      //       console.log(res);
      //       this.dialogVisible = false;
      //       this.$emit("flesh");
      //     })
      //     .catch((err) => {
      //       console.log(err);
      //     });
    },
    handleClose() {
      this.dialogVisible = false;
      this.$emit("update:flesh",false);
    },
  },
  created() {

  }
};
</script>

<style scoped>
.updateinfo {
  height: 350px;
  overflow: auto;
}
.left {
  /* width: 330px; */
  float: left;
}
.right {
  overflow: hidden;
}
</style>